<!DOCTYPE html>
<html lang="en">
<head>
    <STYLE><!--
    H1 {
        font-family: Tahoma, Arial, sans-serif;
        color: white;
        background-color: #525D76;
        font-size: 28px;
    }

    H2 {
        font-family: Tahoma, Arial, sans-serif;
        color: white;
        background-color: #525D76;
        font-size: 20px;
    }

    H3 {
        font-family: Tahoma, Arial, sans-serif;
        color: white;
        background-color: #525D76;
        font-size: 14px;
    }

    BODY {
        font-family: Tahoma, Arial, sans-serif;
        color: black;
        background-color: white;
    }

    B {
        font-family: Tahoma, Arial, sans-serif;
        color: white;
        background-color: #525D76;
    }

    P {
        font-family: Tahoma, Arial, sans-serif;
        background: white;
        color: black;
        font-size: 12px;
    }

    A {
        color: black;
    }

    A.name {
        color: black;
    }

    HR {
        color: #525D76;
    }

    --></STYLE>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function getMD5Func(url, filePath, id) {
            http.post({url: url, data: JSON.stringify({"path":filePath}), type:'json', timeout: 100*1000}, function (err, result) {
                if (err === null) {
                    if (result.code === 0){
                        document.getElementById(id).innerHTML = result.data.md5
                    } else {
                        alert(result.msg)
                    }
                } else {
                    alert("删除失败!%s" % err)
                }
            })
        }
        function uploadFileFunc(url) {
            const file = document.getElementById('uploadFile')
            const path = document.getElementById('urlPath')
            let formData = new FormData()
            formData.append('file', file.files[0])
            // formData.append('path', path.title)
            http.post({url: url, data: formData, type:'formData', upload:true, path:path.title, timeout: 100*1000*1000}, function (err, result) {
                if (err === null) {
                    if (result.code === 0){
                        alert("上传文件成功！")
                        location.reload();
                    } else {
                        console.log(result.msg)
                    }

                } else {
                    alert("上传失败!%s" % err)
                }
            })
        }
        function deleteFileFunc(url, filePath){
            console.log(url, filePath)
            http.post({url: url, data: JSON.stringify({"path":filePath}), type:'json', timeout: 100*1000}, function (err, result) {
                if (err === null) {
                    if (result.code === 0){
                        console.log("删除文件成功！")
                        location.reload();
                    } else {
                        console.log(result.msg)
                    }
                } else {
                    alert("删除失败!%s" % err)
                }
            })
        }
        function mkdirFunc(url){
            const path = document.getElementById('urlPath').title
            const dir = document.getElementById('mkdir').value
            // console.log(dir)
            http.post({url: url, data: JSON.stringify({"path":path, "dir":dir}), type:'json', timeout: 100*1000}, function (err, result) {
                if (err === null) {
                    if (result.code === 0){
                        console.log("创建文件夹成功！")
                        location.reload();
                    } else {
                        console.log(result.msg)
                    }
                } else {
                    alert("创建文件失败!%s" % err)
                }
            })
        }
        let http = {};
        http.quest = function (method, option, callback) {
            let type = option.type || 'json';
            let timeout = option.timeout || 0;
            let xhr = new XMLHttpRequest();
            (timeout > 0) && (xhr.timeout = timeout);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 400) {
                        let result = xhr.responseText;
                        try {
                            result = JSON.parse(xhr.responseText);
                        } catch (e) {
                        }
                        callback && callback(null, result);
                    } else {
                        callback && callback('status: ' + xhr.status);
                    }
                }
            };
            if (option.upload === true){
                xhr.upload.onprogress = function (event){
                    // console.log('progress.loaded:', event.loaded)
                    // console.log('progress.loaded:', event.loaded)
                    if (event.lengthComputable) {
                        let percent = Math.floor(event.loaded/event.total*100)
                        document.querySelector(".progress-item").style.width = percent + "%"
                        document.querySelector(".progress-item").innerHTML = percent + "%"
                        // console.log('progress percent:', percent + "%")
                    }
                }
            }
            xhr.open(method, option.url, true);
            // 必须open之后才能设置setRequestHeader
            if (type === 'json') {
                xhr.setRequestHeader("Content-Type", "application/json")
            } else if (type === 'wwww'){
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            }
            // encodeURIComponent(string) 支持中文
            xhr.setRequestHeader('URL-Path', encodeURIComponent(option.path));
            xhr.send(option.data);
            xhr.ontimeout = function () {
                callback && callback('timeout');
                console.log('%c连%c接%c超%c时', 'color:red', 'color:orange', 'color:purple', 'color:green');
            };
        };
        http.get = function (url, callback) {
            let option = url.url ? url : {url: url};
            // option.method = 'get';
            this.quest('get', option, callback);
        };
        http.post = function (option, callback) {
            // option.method = 'post';
            http.quest('post', option, callback);
        };
    </script>
</head>
<body>
<style>
    table {margin: 15px auto;
        border: #aaa 4px double;
        border-collapse: separate;
        border-spacing: 0px }
    td,th {padding: 5px;
        text-align: center;
        border-color: #ddd;
        border-width: 1px;
        border-style: solid}
    tr:nth-child(even) {
        background: #f1f1f1;
    }
</style>
    <h1 id="urlPath" title="{{ .path}}">文件列表 {{ .path}}</h1>
    <hr size="1" noshade="noshade">
    <table>
        <tbody>
            <tr>
                <td><input type="button" value="返回" onclick="javascript:history.back(-1);"></td>
                <td>
                    <!--                <form method="post" enctype="multipart/form-data">-->
                    <input id="uploadFile" type="file" name="file">
                    <input type="button" value="上传" onclick="uploadFileFunc('{{ .uploadFilePath}}');">
                    <!--                </form>-->
                </td>
                <td><div style="background: #d3dfe3;width: 200px; height:28px; display: flex; flex-flow: row; align-items: center">
                    <span>上传进度:</span>
                    <div style=" height: 100%; flex:1; display: flex; flex-flow: row; align-items: center">
                        <span class="progress-item" style="background: #2890e2; width: 0; height: 70%;" >0%</span>
                    </div>
                </div></td>
                <td>
                        <input id="mkdir" type="text" >
                        <input type="button" value="新建文件夹" onclick="mkdirFunc('{{ .mkdirPath}}')">
                        <input type="button" value="返回首页" onclick="location='{{ .rootPath}}'">
                </td>
            </tr>
        </tbody>
    </table>
    <hr size="1" noshade="noshade">
    <table border="0" width="100%" cellspacing="0" cellpadding="5" align="center"
           style="overflow: scroll;word-break: keep-all">
        <tbody>
        <tr bgcolor="#00DB00">
            <td>序号</td>
            <td>文件名</td>
            <td>文件大小</td>
            <td>文件创建时间</td>
            <td>MD5</td>
            <td>操作</td>
        </tr>
        {{range .files}}
        <tr>
            <td width="10%">{{ .Sn}}</td>
            <td width="30%"><a href="{{ .Path}}">{{ .Name}}</a></td>
            <td width="20%">{{ .Size}}</td>
            <td width="20%">{{ .Time}}</td>
            <td width="50%" >
                <span id="tb_r_{{ .Sn}}" onclick="getMD5Func('{{ $.getMdePath}}', '{{ .Path}}', 'tb_r_{{ .Sn}}');">{{ .MD5}}</span>
            </td>
            </td>
            <td>
                <button onclick="deleteFileFunc('{{ $.deleteFilePath}}', '{{ .Path}}');">删除</button>
            </td>
        </tr>
        {{end}}
        </tbody>
    </table>
    <hr size="1" noshade="noshade">
    <h2>Go FileServer By linjinting /</h2>
</body>
</html>